<template>
  <div>
    <el-row>
      <el-col :span="2">
        <div class="grid-content bg-white text-side" :style="{height:  `${itemHeight}px`}">原材料获取</div>
      </el-col>

      <!-- 左侧输入 -->
      <el-col :span="8">
        <div class="grid-content bg-white" :style="{height:  `${itemHeight}px`}">
          <div v-for="item in leftNodeList" :key="item.name">
            <side-node class="side-node" :name="item.name"/>
          </div>
          <div class="add-btn-item" @click="addItem(1)" v-if="centerNodeList.length > 0">+ 添加输入</div>

        </div>
      </el-col>

      <!-- 中心节点 -->
      <el-col :span="6">
        <div class="grid-content bg-dark" :style="{height:  `${itemHeight}px`}">
          <div class="center-node" :style="{marginTop:  `${centerMargin}px`}">
            <div v-for="item in centerNodeList" :key="item.name">
              <center-node class="center-node" :name="item.name"/>
            </div>
            <div class="add-btn-center" @click="addItem(3)" v-if="centerNodeList.length == 0">+ 添加生产工序</div>
            <div class="add-btn-center" @click="addCenter()" v-if="centerNodeList.length != 0">+ 继续添加生产工序</div>
          </div>
        </div>
      </el-col>

      <!-- 右侧输出 -->
      <el-col :span="8">
        <div class="grid-content bg-white" :style="{height:  `${itemHeight}px`}">
          <div v-for="item in rightNodeList" :key="item.name">
            <side-node class="side-node" :name="item.name"/>
          </div>
          <div class="add-btn-item" @click="addItem(2)" v-if="centerNodeList.length > 0">+ 添加输入</div>
        </div>
      </el-col>

    </el-row>

    <!-- 添加节点弹窗 -->
    <el-dialog
      title="添加/编辑节点"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-input v-model="nodeName"></el-input>
      <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addNode()">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import CenterNode from "../CenterNode"
import SideNode from "../SideNode"

export default {
  components: {
    CenterNode,
    SideNode
  },
  methods: {
    // 添加新的中心节点
    addCenter() {

    },
    addItem(num) {
      // 添加左侧节点
      if (num == 1) {
        this.addStatus = 1
      } else if (num == 2) {
        this.addStatus = 2
      } else if (num == 3) {
        this.addStatus = 3
      }
      this.nodeName = ''
      this.dialogVisible = true
    },
    addNode() {
      this.dialogVisible = false
      if (this.addStatus == 1) {
        this.leftNodeList.push( // 添加左侧节点
          {name: this.nodeName}
        )
      } else if (this.addStatus == 2) { // 添加右侧节点
        this.rightNodeList.push(
          {name: this.nodeName}
        )
      } else if (this.addStatus == 3) { // 添加中心节点
        this.centerNodeList.push(
          {name: this.nodeName}
        )
      }
    },
    handleClose(done) {
      this.dialogVisible = false
    },
  },
  data() {
    return {
      addStatus: 1,
      nodeName: '',
      dialogVisible: false,
      // 左侧节点列表
      leftNodeList: [],
      // 中间节点列表
      centerNodeList: [],
      // 右侧节点列表
      rightNodeList: []
    }
  },
  computed: {
    itemHeight() {
      var max_length = Math.max(this.leftNodeList.length, this.centerNodeList.length, this.rightNodeList.length)
      if (max_length == 0) {
        return 200
      } else if (max_length == 1) {
        return 250
      } else {
        return max_length * 100
      }

    },
    centerMargin() {
      return this.itemHeight / 3
    },
    show: {
      get() {
        return this.visible
      },
      set(v) {
        this.show = v
      }
    }
  }
}
</script>


<style scoped>
.text-side {
  color: #a6a6a6;
  text-align: center;
  writing-mode: vertical-lr;
  padding-left: 30px;
  width: 100%;
}

.grid-content {
  height: 200px;
  border: 1px solid #e5e5e5;
  padding-top: 20px;
  position: relative;
}

.add-btn-item {
  text-align: center;
  color: #8c8c8c;
  font-size: 14px;
  position: absolute;
  bottom: 20px;
  right: 40%;
}

.add-btn-center {
  width: 140px;
  height: 60px;
  margin: 0 auto;
  text-align: center;
  color: #8c8c8c;
  font-size: 14px;
  border: 1px dashed #d9d9d9;
  padding-top: 20px;
}

.font-color-dark {
  color: #8c8c8c;
}

.font-color-light {
  color: #c3c3c3;
}

.title {
  font-size: 20px;
}

.content {
  font-size: 16px;
}

.center {
  margin: 0 auto;
  margin-bottom: 10px;
  text-align: center;
}

.side-node {
  margin-bottom: 20px;
}

.center-node {
  margin-bottom: 20px;
}
</style>
